<script lang="ts" setup>
import lodash from 'lodash'
import moment from 'moment'
import { JobRecordApi } from '~/api/JobRecordApi'
import { JobRecordModel } from '~/model'

interface RecordsGroupByDate {
  date: string
  records: JobRecordModel[]
}

const records = ref([] as JobRecordModel[])
const recordsGroupByDate = computed(() => {
  const loMap = lodash.groupBy(records.value, x => moment(x.date).format('YYYY/MM/DD'))
  const res: RecordsGroupByDate[] = []
  for (const sDate of Object.keys(loMap)) {
    res.push({
      date: sDate,
      records: loMap[sDate],
    })
  }
  res.sort((a, b) => b.date.localeCompare(a.date))
  return res
})

onMounted(() => {
  JobRecordApi.getAll()
    .then((res) => {
      records.value = res
    })
  setTimeout(() => {
    window.print()
  }, 2000)
})

function fullDesc(x: JobRecordModel) {
  return `${x.worker?.name}${x.description()}`
}
</script>

<template>
  <div min-h-screen bg-emerald-1>
    <div class="a4">
      <div b-b="1 solid black">
        事务备份[{{ moment().format('YYYY-MM-DD HH:mm:ss') }}]
      </div>
      <div
        v-for="(item, index) in recordsGroupByDate"
        :key="index"
        b-b="1 solid black"
      >
        <span mr2>[{{ item.date }}]</span>
        <span
          v-for="(s, ii) in item.records.map(x => fullDesc(x))"
          :key="ii" mr2
        >[{{ ii + 1 }}] {{ s }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.a4 {
  width: 210mm;
  background-color: #fff;
  padding: 20mm;
}
.event-table {
  border-collapse: collapse;
  width: 100%;

  td {
    border: 1px solid black;
    padding: 0.25rem;
  }
}

@page {
  size: 210mm 297mm;
  // page-orientation: upright;
  // margin-left: 20mm;
}
</style>

<route lang="yaml">
meta:
  layout: nolayout
  </route>
